<template>
    <div class="card">
        <div class="card-title">
            {{ imageTitle }}
        </div>
        <div class="card-image">
            <img v-bind:src="imageUrl">
        </div>
        <div class="card-info">
            <div class="price">价格：{{ price }}</div>
            <div class="info"><span id="beizhu">备注：{{ info }}</span><button  class="btn">加入购物车</button></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },
    props: {
        imageUrl: String,
        imageTitle: String,
        price: Number,
        info: String,
    }
}
</script>
<style scoped>
    .card{
        width: 300px;
        height: 450px;
        background-color: white;
        border-radius: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 5px;
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .card:hover{
        box-shadow: 0 16px 32px 0 rgba(254, 255, 255, 0);
        transform: translate(0,-5px);
        transition-delay: 0s !important;
        background-color: rgba(255, 255, 255, .50);
    }

    .card-title{
        width: 100%;
        font-size: 30px;
        text-align: center;
        color: white;
        font-weight: 700;
    }

    .card-image{
        width: 100%;
        height: 300px;
    }

    .card-image img{
        width: 100%;
        height: 100%;
        border-radius: 5%;
        margin: 0 auto;
    }

    .card-info{
        width: 100%;
        padding-left: 15px;
        font-size: 1rem;
        color: white;
        font-weight: 700;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 0 0 30px 30px;
    }

    #beizhu{
        margin-right: 30px;
    }

    .btn{
        color: white;
        background-color: #2f38b7;
        border-radius: 30px;
        width: 100px;
    }

</style>